<template>
  <div class="content">
    <!--   工序列表弹窗-->
    <el-dialog
      v-dialogDrag
      class="dialog-class"
      :title="$t('menu.processList')"
      model
      :visible.sync="openStocker"
      :close-on-click-modal="false"
      width="60%"
      destroy-on-close
      :before-close="handleClose"
    >
      <div class="public-form">
        <span style="width: 50px">{{ $t('shop.name1') }}</span>
        <el-input v-model.trim="staockerPagination.fname" size="mini" style="width: 200px" />
        <el-button type="primary" size="mini" style="margin-left: 20px" @click="queryStocker">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-header="tableHeader"
        :table-data="tableStockerData"
        table-height="46vh"
        :cell-style="cellStyle"
        @clickRow="stockRow"
      />
      <jc-pagination
        v-show="staockerPagination.total > 0"
        :total="staockerPagination.total"
        :page.sync="staockerPagination.pageNum"
        :limit.sync="staockerPagination.pageSize"
        @pagination="queryStocker"
      />
    </el-dialog>
  </div>
</template>
<script>
import jcTable from '@/components/Table'
import jcPagination from '@/components/Pagination'
import { tWorkshopGroupDetails } from '@/api/production/process'
export default {
  components: {
    jcTable,
    jcPagination
  },
  props: {
    groupId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      openStocker: true, // 国家
      tableStockerData: [], // 国家数据
      tableHeader: [
        { label: this.$t('market.processnumber'), prop: 'fprocessname', minWidth: '120px' },
        { label: this.$t('market.processname'), prop: 'fprocessnumber', minWidth: '120px' },
        { label: this.$t('shop.price'), prop: 'fprice', minWidth: '120px' },
        { label: this.$t('market.note'), prop: 'fremark', minWidth: '120px' }
      ],
      staockerPagination: {
        fname: '',
        total: 0,
        pageNum: 1, // 当前页
        pageSize: 200 // 每页显示多少条数据
      },
      cellStyle: { padding: '2px 0' },
      prodValue: {}
    }
  },
  created() {
    this.queryStocker()
  },
  methods: {
    // 工序
    async queryStocker() {
      await tWorkshopGroupDetails({ ...this.staockerPagination, groupId: this.groupId }).then(res => {
        if (res.code === 0) {
          this.tableStockerData = res.data.list
          this.staockerPagination.total = res.data.total
        }
      })
    },
    // 工序选中
    stockRow(item) {
      this.$emit('process', item)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('process', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
